<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<form nz-form [nzLayout]="'horizontal'" [formGroup]="validateForm" (ngSubmit)="handleSubmit()">
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>
      ID
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <input
        nz-input
        autofocus
        formControlName="id"
        placeholder="Repository id"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>
      URL
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
        <input type="text"
          nz-input
          formControlName="url"
          placeholder="Repository url">
      </nz-input-group>
      <ng-template #addOnBeforeTemplate>
        <nz-select name="urlProtocol"
          [(ngModel)]="urlProtocol"
          [ngModelOptions]="{standalone: true}">
          <nz-option [nzLabel]="'http://'" [nzValue]="'http://'"></nz-option>
          <nz-option [nzLabel]="'https://'" [nzValue]="'https://'"></nz-option>
          <nz-option [nzLabel]="'file://'" [nzValue]="'file://'"></nz-option>
        </nz-select>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>
      Snapshot
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <nz-switch formControlName="snapshot"></nz-switch>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6">
      Username
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <input
        nz-input
        formControlName="username"
        placeholder="username"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6">
      Password
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <input
        nz-input
        type="password"
        formControlName="password"
        placeholder="password"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-divider nzType="horizontal"></nz-divider>
  <nz-form-item>
    <nz-form-label [nzSpan]="6">
      Protocol
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <nz-radio-group formControlName="proxyProtocol">
        <label nz-radio nzValue="HTTP">HTTP</label>
        <label nz-radio nzValue="HTTPS">HTTPS</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6">
      Host
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <input
        nz-input
        formControlName="proxyHost"
        placeholder="proxy host"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6">
      Port
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <input
        nz-input
        formControlName="proxyPort"
        placeholder="proxy port"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6">
      Login
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <input
        nz-input
        formControlName="proxyLogin"
        placeholder="proxy login"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6">
      Password
    </nz-form-label>
    <nz-form-control nz-col [nzSpan]="16">
      <input
        nz-input
        type="password"
        formControlName="proxyLogin"
        placeholder="proxy password"
      />
    </nz-form-control>
  </nz-form-item>
</form>

<div class="modal-footer ant-modal-footer">
  <button
    nz-button
    nzType="primary"
    [disabled]="!validateForm.valid"
    (click)="handleSubmit()"
    [nzLoading]="submitting"
  >
    Add
  </button>
  <button nz-button (click)="handleCancel()">
    Cancel
  </button>
</div>
